{include file="df/tpl/base_head" /}
<!--script async src="< ?=$js?>stat.js">统计代码 anync / 放在最后 </script-->
<!--[if lt IE 9]>
<script type="text/javascript" src="__CDN__/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{block name="area_head"}
<style>
.layui-tab-title li{ padding:0 0 0 20px !important; }
.layui-tab-content {
  background: url('__IMG__/bg.png') center center no-repeat;
}
</style>
  <!--顶部区域 -->
{/block}
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <!-- 头部区域 -->
  <div class="layui-header">
    <div class="layui-logo hvr-pop js-tab" data-href="{:url('manager/welcome')}" data-tab="0">LOGO / SITENAME</div>
    <a href="javascript:;" id="js-hide-menu" class="switch-menu-wrap" title="转换侧边栏"><i class="fa fa-bars"></i></a>
    <!-- 显示/隐藏菜单 -->
    <a href="javascript:;" class="iconfont hideMenu icon-menu1">
    </a>
    <!-- 搜索 -->
    <!-- <div class="layui-form component">
          <select name="modules" lay-verify="required" lay-search="">
          <option value="">直接选择或搜索选择</option>
           <option value="1">layer</option>
          </select>
          <i class="layui-icon">&#xe615;</i>
      </div> -->

    <ul class="layui-nav layui-layout-left">
      <!--?php foreach ($menu_all as $v) { ?>
      <li class="hvr-pulse layui-nav-item < ?php if($top_menu_id== $v['id']) echo 'layui-this';?>" data-id="< ?=$v['id']?>"><a href="javascript:;">< ?=$v['name']?></a></li>
      < ?php }?-->
    </ul>
    <ul class="layui-nav layui-layout-right" style="right:90px">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="{:avaUrl($uinfo.id,60)}" class="layui-nav-img">
          {$uinfo.nick}
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;" data-href="{:url('user/detail',['id'=>$uinfo.id])}" class="js-tab" data-tab="admin">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item hvr-push"><a href="javascript:;" class=""> <i class="fa fa-bell" style="position: relative;top:3px;font-size: 22px;"></i><i class="layui-badge">5</i> </a></li>
    </ul>
    <ul class="layui-nav layui-layout-right" style="padding-right:0px;overflow:hidden;padding-left:0px;">
      <li class="layui-nav-item"><a href="{:url('manager/logout')}" class="ajax-get pr10" title="退出"> <i class="fa fa-sign-out"></i></a></li>
      <li class="layui-nav-item"><a href="javascript:;" class="pl10 pr10 js-refresh" title="刷新"> <i class="fa fa-refresh layui-anim layui-anim-rotate layui-anim-loop"></i></a></li>
      <li class="layui-nav-item">
        <a href="javascript:;" class="pl10 pr10" id="admin-fullscreen" title="全屏"><i class="fa fa-arrows-alt"></i> <span class="admin-fullText"></span> </a>
      </li>
    </ul>
  </div>

  <!-- 左侧导航区域 -->
  <div class="layui-side side-menu">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="side-menu" lay-shrink="">
        <!--?php foreach ($left_menu as $v) { ?>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;"><i class="layui-icon">&#xe620;</i> < ?=$v['name']?></a>
          < ?php if (isset($v['child'])){ ?>
          <dl class="layui-nav-child">
            < ?php foreach ($v['child'] as $v2) { ?>
            <dd class="hvr-shrink  < ?php if($v2['id'] == $menu_id) echo 'layui-this'; ?>"><a href="< ?=$v2['url']?>" data-id="< ?=$v2['id']?>">&nbsp;&nbsp;&nbsp;&nbsp;< ?=$v2['name']?></a></dd>
            < ?php } ?>
          </dl>
          < ?php } ?>
        </li>
        < ?php } ?-->
      </ul>
    </div>
  </div>
  <!-- 内容主体 -->
  <div class="layui-body layui-tab" lay-filter="mainTab" lay-allowClose="true">
    <ul class="layui-tab-title" style="position: relative;
    left: 0;top: 0px; ">
    <!-- <li lay-id="iframe0"><i class="fa fa-desktop"></i></li> -->
  </ul>
<div class="layui-tab-content" style="position: absolute;
    left: 0;
    top: 32px;">
  <!-- <div class="layui-tab-item">
    <iframe id="iframe0" src="{:url('manager/welcome')}" frameborder="0" style="width:100%;height:100%;"></iframe>
  </div> -->
</div>
  <!-- 底部固定区域 -->
  <div class="layui-footer  layui-anim layui-anim-up">
    <div>© layui.com - 底部固定区域</div>
    <div class="layui-layout-right layui-nav-item weather" pc  style="right:10px;">
      <div id="tp-weather-widget"><!-- 天气信息 --></div>
      <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
      <script>tpwidget("init", {
          "flavor": "slim",
          "location": "WX4FBXXFKE4F",
          "geolocation": "enabled",
          "language": "zh-chs",
          "unit": "c",
          "theme": "chameleon",
          "container": "tp-weather-widget",
          "bubble": "disabled",
          "alarmType": "badge",
          "color": "#FFFFFF",
          "uid": "U9EC08A15F",
          "hash": "039da28f5581f4bcb5c799fb4cdfb673"
      });tpwidget("show");</script>
    </div>
  </div>
</div>
<!-- script -->
<script>
var initTabs  = [];
// var winWidth = $(window).width();
// var heiHeght = $(window).height();
// page init
layui.use(['rb','element'], function(){
  var layer = layui.layer,
  rb = layui.rb,
  el = layui.element,
  $ = layui.$;

  rb.log('frame','init');

  var menus = JSON.parse('{$menu_json|raw}')
  ,site = "{:config('site_url')}";

  var welcome = {
    title:'<i class="fa fa-desktop"></i>',
    content:'<iframe id="iframe0" src="{:url('manager/welcome')}" frameborder="0" style="width:100%;height:100%;"></iframe>',
    id:'iframe0'
  };
  tabChange('mainTab','iframe0',welcome);
  el.on('tabDelete(mainTab)', function(data){
    initTabs.remove($(this).parent().attr('lay-id'));
  });
  $('.js-tab').click(function(e) {
    var $this = $(this);
    var id  = $this.data('tab'),o;
    var src,title;
    if(id == '0'){
      o = welcome;
    }else{
      src = $this.data('href');//this.getAttribute('data-href')
      title = $this.html().replace(/&nbsp;/g, "");
      //+'<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
      o = {
        title : title
        ,content: '<iframe id="iframe'+id+'" src="' + src +'" frameborder="0" style="width:100%;height:100%;"></iframe>'
        ,id : 'iframe'+id
      };
    }
    tabChange('mainTab', 'iframe'+id,o);
  });

  // console.log(menus);
  if(!$.isEmptyObject(menus)){
    var html = '',k,item,menu,id;
    // 组装顶部菜单

    $.each(menus, function(k, item) {
    // for (k in menus) {
      // item = menus[k];
      html = html
      +'<li class="hvr-pulse layui-nav-item " data-id="'+item.id+'">'
      +' <a href="javascript:;">'+item.name+'</a>'
      +'</li>';
    // };
    });
    if(html){
      $('.layui-layout-left').html(html).children('.layui-nav-item').on('click',function(e){
        e.preventDefault();
        id = $(this).index();
        // 保存上次点击的顶部菜单id
        _top_menu_id = parseInt($(this).data('id'));
        rb.local('last_top_menu',_top_menu_id);
        // _menu_ids[mid] = 0;
        // rb.local('menu_ids',_menu_ids);
        //组装左边菜单
        html = '';
        // for (k in menus[id]['child']){
        $.each(menus[id]['child'], function(k, item) {
          // item = menus[id]['child'][k];
          html = html
          +'<li class="layui-nav-item layui-nav-itemed">'
          +'  <a class="" href="javascript:;"><i class="'+item.icon+'"></i> '+item.name +'</a>';
          if(item.child){
            html = html
            +'   <dl class="layui-nav-child">';
            $.each(item.child,function(k2,item2) {
            // for(k2 in item.child){
              // item2 = item.child[k2];
            html = html
            +'    <dd class="hvr-shrink '+ (item2.id == _menu_id ? 'layui-this' : '') +'"><a href="'+item2.url+'" data-id="'+item2.id+'">&nbsp;&nbsp;&nbsp;&nbsp;'+item2.name+'</a></dd>';
            // }
            });
            html = html
            +'  </dl>';
          }
          html = html
          +'</li>';
        // }
        });
        // if(html){
          $('.layui-nav-tree.layui-nav-side').html(html);
          el.render('nav');
          $('.layui-nav-tree.layui-nav-side').on('click','dd', function(e) {
            e.preventDefault();
            $this = $(this);
            var $a = $this.children('a');
            var id = $a.data('id');
            // 保存上次点击的左边菜单id
            _menu_ids[_top_menu_id] = id;
            rb.local('menu_ids',_menu_ids);
            var icon = $this.parent().prev('a').children('i').prop("outerHTML");
            var html = $a.html();
            var href = $a.attr('href');
            tabChange('mainTab', 'iframe'+id,{
              title : icon+html.replace(/&nbsp;/g, "")
              //+'<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
              ,content: '<iframe id="iframe'+id+'" src="' + href + '?menu_id='+id + '" frameborder="0" style="width:100%;height:100%;"></iframe>'
              ,id : 'iframe'+id
            });
          });
        // }
      }).filter('[data-id='+_top_menu_id+']').addClass('layui-this').trigger('click');
    }
  }
  // 不写 关闭结构 自动绑定事件
  // $('.layui-tab').on('click','.layui-tab-close',function(){
  //   el.tabDelete('mainTab', $(this).parent().attr('lay-id'));
  // })

  // 自动记忆上次的每个大菜单的小菜单
  var menu_id = _menu_id || 0;
  if(!menu_id && rb.local('menu_ids')){
    menu_id = (rb.local('menu_ids'))[_top_menu_id] || 0;
  }
  if(menu_id){
    $('.layui-nav-tree dd a[data-id='+menu_id+']').click();
  }else{
    tabChange('mainTab', 'iframe0',welcome);
  }
  function tabChange(filter,id,initObj=false) {
    if(!initTabs.contains(id)){
      initTabs.push(id);
      el.tabDelete(filter, id).tabAdd(filter, initObj);
    }
    el.tabChange(filter, id);
  }
});
</script>
</body>
</html>